<template>
  <div>
    <div class="goods_container">
      <div
        class="goods_wrapper"
        v-for="(item, index) in goodsList"
        :key="index"
      >
        <div class="goods_img_box">
          <img :src="item.pic" />
        </div>
        <div class="goods_right_box">
          <div class="goods_right_title">{{ item.name }}</div>
          <div class="goods_right_price">
            <div class="goods_price">
              <span class="goods_price_box">￥{{item.minPrice}}</span>
              <span class="goods_min_price">低价</span>
            </div>
            <div>
              <span>￥{{item.originalPrice}}</span>
              <span>原价</span>
            </div>
            <div>
              <span>{{item.stores}}件</span>
              <span>限量</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    goodsList: {
      //商品数据
      type: Array || Object,
      required: true,
    },
  },
  mounted() {
    console.log(this.goodsList);
  },
};
</script>
<style lang="scss" scoped>
.goods_container {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  .goods_wrapper {
    width: 100%;
    height: 5rem;
    //   margin-top: 0.2rem;
    border-bottom: 1px solid lightgray;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    //   background: red;
    .goods_img_box {
      width: 30%;
      height: 100%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      img {
        width: 90%;
        height: 90%;
        border-radius: 0.4rem;
      }
    }
    .goods_right_box {
      width: 68%;
      height: 100%;
    //   background: green;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .goods_right_title {
        width: 100%;
        font-size: 0.7rem;
      }
      .goods_right_price {
        width: 70%;
        // background: pink;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        div{
            width: 28%;
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            span{
                font-size: 0.6rem;
                color: gray;
            }
        }
        .goods_price{
            .goods_price_box{
                color: red;
            }
            .goods_min_price{
                color: black;
            }
        }
      }
    }
  }
}
</style>